/**
 * 创元汇 - WebName
 * https://menger.me
 * @大梦
 */

import React, {Component} from 'react'
import {
    Text,
    View,
    Image,
    TextInput,
    FlatList,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    StatusBar,
    WebView,
    Platform
} from 'react-native'
import { StackActions, NavigationActions } from 'react-navigation';
import NetRequest from '../../utils/utilsRequest'
import ServicesApi from '../../constants/ServicesApi'
import GlobalStyles from '../../constants/GlobalStyles'
import NavigationBar from '../../components/common/NavigationBar'
import UtilsView from '../../utils/utilsView'
import { toastShort, toastLong, consoleLog } from '../../utils/utilsToast'
import ActivityIndicatorItem from '../../components/common/ActivityIndicatorItem'
import FooterComponent from '../../components/common/footerComponent'
import EmptyComponent from '../../components/common/emptyComponent'
import {Overlay, Label, Button} from 'teaset';
import AlertManager from '../../components/common/AlertManager'
import Theme from '../../components/common/Theme'

export default class Fund extends Component {

    constructor(props) {
        super(props);
        this.state =  {
            loginState: global.user && global.user.loginState ? global.user.loginState : false,
            user: global.user && global.user.userData ? global.user.userData : '',
            ready: false,
            showFoot: 0,
            error: false,
            errorInfo: "",
            loadMore: false,
            refreshing: false,
            fundListData: [],
            order_type: 0,
            fund_type: 0,
            risk_level: 0,
            rate_start: '',
            rate_end: '',
            paixuShow: false,
            shaixuanShow: false,
            yinyingShow: false,
            upup: 0
        }
        // this.netRequest = new NetRequest();
    }

    /**
     * 初始化状态
     * @type {Boolean}
     */
    page = 0;
    totalPage = 1;
    loadMore = false;
    refreshing = false;

    componentDidMount(){
        console.log(global.account.accountData)
        this.dropLoadMore();
        this.willFocus = this.props.navigation.addListener('willFocus', (payload) => {
            if(global.user.loginState){
                this.getUserInfo(global.user.userData.id, global.user.userData.token);
            }
        })
        setTimeout(() => {
            this.updateState({
                ready: true,
                showFoot: 0 // 控制foot， 0：隐藏footer  1：已加载完成,没有更多数据   2 ：显示加载中
            })
        },0)
    }

    updateState = (state) => {
        if (!this) { return };
        this.setState(state);
    }

    getUserInfo = (userid, usertoken) => {

        let url = ServicesApi.get_member_info;

        let data = {
            member_id: userid,
            token: usertoken
        };
        Services.post(url, data, true)
            .then( result => {
                console.log(result);
                if (result && result.code == StatusCode.SUCCESS_CODE) {
                    let user = result.data;

                    storage.save({
                        key: 'loginState',
                        data: user
                    });

                    global.user = {
                        loginState: true,
                        userData: user
                    };

                    this.updateState({
                        upup: 1
                    });

                }else{
                    storage.remove({
                        key: 'loginState',
                    });
                    global.user.loginState = false;
                    global.user.userData = [];
                    setTimeout(() => {
                        toastShort('您的账户信息已过期，请重新登录！')
                        const resetAction = NavigationActions.reset({
                            index: 0,
                            actions: [
                                NavigationActions.navigate({ routeName: 'Login'})
                            ]
                        })
                        this.props.navigation.dispatch(resetAction)
                    }, 101)
                }
            })
            .catch( error => {
                // toastShort('服务器请求失败，请稍后重试！');
            })
    }

    loadNetData = (page, num) => {
        let url = ServicesApi.fund_list;
        let data = {
            order_type: num,
            fund_type: this.state.fund_type,
            risk_level: this.state.risk_level,
            rate_start: this.state.rate_start,
            rate_end: this.state.rate_end,
            page: page,
            member_id: global.user.userData.id,
        }
        return Services.post(url, data, true)
            .then( result => {
                console.log(result);
                return result;
            })
            .catch( error => {
                // consoleLog('链接服务器出错，请稍后重试', error);
                this.updateState({
                    ready: true,
                    error: true,
                    errorInfo: error
                })
            })
    }

    dropLoadMore = async () => {
        //如果是正在加载中或没有更多数据了，则返回
        if (this.state.showFoot != 0) {
            return;
        }
        if ((this.page != 1) && (this.page >= this.totalPage)) {
            return;
        } else {
            this.page++;
        }
        this.updateState({
            showFoot: 2
        })
        let result = await this.loadNetData(this.page, this.state.order_type);
        // // console.log(this.totalPage);
        this.totalPage = result.data.count;
        // // console.log(result);
        let foot = 0;
        if (this.page >= this.totalPage) {
            // // console.log(this.totalPage);
            foot = 1; //listView底部显示没有更多数据了
        }
        this.updateState({
            showFoot: foot,
            fundListData: this.state.fundListData.concat(result.data.list)
        })
    }

    freshNetData = async (num) => {
        if(!num){
            num = this.state.order_type;
        }
        let result = await this.loadNetData(1, num);
        if (result && result.code == StatusCode.SUCCESS_CODE) {
            this.page = 1;
            this.updateState({
                showFoot: 0
            })
            this.updateState({
                fundListData: result.data.list
            })
        }
    }

    onPushNavigator = (compent) => {
        const { navigate } = this.props.navigation;
        navigate( compent , {

        })
    }

    onPushToFundDetail = (compent, fund_id, title, datum_rate, buy_end_day, buy_end_money, time_limit, start_buy_money, end_people, is_collection) => {
        const { navigate } = this.props.navigation;
        navigate( compent , {
            fund_id: fund_id,
            title: title,
            datum_rate: datum_rate,
            buy_end_day: buy_end_day,
            buy_end_money: buy_end_money,
            time_limit: time_limit,
            start_buy_money: start_buy_money,
            end_people: end_people,
            is_collection: is_collection,
            onCallBack:()=>{
                this.freshNetData(this.state.order_type);
            }
        })
    }

    renderCompanyItem = ({item}) => {
        return (
            <TouchableOpacity onPress={()=>{this.onPushToFundDetail('FundDetail', item.id, item.title, item.datum_rate, item.buy_end_day, item.buy_end_money, item.time_limit, item.start_buy_money, item.end_people, item.is_collection)}} style={[GlobalStyles.fundList, {marginLeft: 15, marginRight: 15}]}>
                <View style={[GlobalStyles.fundTop, GlobalStyles.flexRowBetween]}>
                    <Text style={GlobalStyles.fundTitle}>{item.title}</Text>
                    <Text style={GlobalStyles.fundDakuan}>截止打款{item.buy_end_day}天</Text>
                </View>
                <View style={GlobalStyles.fundMid}>
                    <Image source={{uri: item.photo}} style={GlobalStyles.fundThumb} />
                </View>
                <View style={[GlobalStyles.fundBot, GlobalStyles.flexRowBetween]}>
                    <View style={[GlobalStyles.fundLeft, GlobalStyles.flexColumnCenter]}>
                        <Text style={GlobalStyles.fundLeftValue}>{item.datum_rate}<Text style={{fontSize: 14}}>%</Text></Text>
                        <Text style={GlobalStyles.fundLeftKey}>业绩基准</Text>
                    </View>
                    <View style={[GlobalStyles.fundCenter, GlobalStyles.flexColumnCenter]}>
                        <Text style={GlobalStyles.fundCenterValue}>{item.time_limit}个月</Text>
                        <Text style={GlobalStyles.fundCenterKey}>产品期限</Text>
                    </View>
                    <View style={[GlobalStyles.fundRight, GlobalStyles.flexColumnCenter]}>
                        <Text style={GlobalStyles.fundRightValue}>{item.buy_end_money}</Text>
                        <Text style={GlobalStyles.fundRightKey}>剩余额度</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }

    renderHeaderView = () => {
        return (
            <View style={styles.shopListViewTitle}>
                
            </View>
        )
    }

    renderFooterView = () => {
        return <FooterComponent status = {this.state.showFoot} {...this.props} />;
    }
    
    renderEmptyView = () => {
        return this.state.showFoot == 0 && <EmptyComponent emptyTips = {'抱歉，没有符合条件的结果显示'} />;
    }

    renderSeparator = () => {
        return <View style={GlobalStyles.horLine} />;
    }

    paixu = () => {
        if(this.state.paixuShow){
            this.updateState({
                paixuShow: false,
                shaixuanShow: false,
                yinyingShow: false,
            })
        }else{
            this.updateState({
                paixuShow: true,
                shaixuanShow: false,
                yinyingShow: true,
            })
        }
            
    }

    shaixuan = () => {
        if(this.state.shaixuanShow){
            this.updateState({
                paixuShow: false,
                shaixuanShow: false,
                yinyingShow: false
            })
        }else{
            this.updateState({
                paixuShow: false,
                shaixuanShow: true,
                yinyingShow: true,
            })
        }

    }

    yinying = () => {
        this.updateState({
            paixuShow: false,
            shaixuanShow: false,
            yinyingShow: false,
        })
    }

    setPaixu = (num) => {
        this.updateState({
            order_type: num,
            paixuShow: false,
            shaixuanShow: false,
            yinyingShow: false,
        })
        this.freshNetData(num);
    }

    setType = (num) => {
        if(this.state.fund_type == num){
            this.updateState({
                fund_type: 0
            })
        }else{
            this.updateState({
                fund_type: num
            })
        }
    }

    setDengji = (num) => {
        if(this.state.risk_level == num){
            this.updateState({
                risk_level: 0
            })
        }else{
            this.updateState({
                risk_level: num
            })
        }
    }

    reSet = () => {
        this.updateState({
            order_type: 0,
            fund_type: 0,
            risk_level: 0,
            rate_start: '',
            rate_end: '',
        })
    }

    submit = () => {
        this.updateState({
            paixuShow: false,
            shaixuanShow: false,
            yinyingShow: false,
        })
        this.freshNetData(this.state.order_type);
    }

    _onPressAlert1 = () => {
        const params = {
            title: '温馨提示',
            detail: '尊敬的会员，根据基金业协会管理规定，查阅基金产品信息请先完成特定对象认定程序，点击”同意“进入特定对象认定开始风险测评，点击“暂不”，暂时不能查阅基金。',
            actions: [
                { title: '暂不', titleStyle: {  }, actionStyle: {  }, onPress: () => { 
                    
                } },
                { title: '同意', onPress: () => { 
                    this.onPushNavigator('PingguLogin');
                } }
            ]
        }
        AlertManager.show(params)
    }

    _onPressAlert2 = () => {
        const params = {
            title: '温馨提示',
            detail: '尊敬的会员，根据基金业协会管理规定，查阅基金产品信息请先完成特定对象认定程序，系统检测到您已完成风险测评，点击“继续”进行风险测评问卷的签署',
            actions: [
                { title: '暂不', titleStyle: {  }, actionStyle: {  }, onPress: () => { 
                    
                } },
                { title: '继续', onPress: () => { 
                    let url = ServicesApi.get_url_001;

                    let data = {
                        member_id: global.user.userData.id,
                        token: global.user.userData.token,
                    }
        
                    Services.post(url, data, true)
                        .then( result => {
                            console.log(result);
                            this.pingguAgree(result.data.url, result.data.show_url);
                        })
                        .catch( error => {
                            // consoleLog('链接服务器出错，请稍后重试', error);
                        })
                    
                } }
            ]
        }
        AlertManager.show(params)
    }

    pingguAgree = (shuju, show_link) => {
        let overlayView = (
            <Overlay.PullView side='bottom' modal={false} ref={v => this.overlayView = v}>
                <View style={{backgroundColor: '#fff', width: GlobalStyles.width, height: GlobalStyles.height}}>
                    <WebView
                        startInLoadingState={true}
                        source={{uri: show_link}}
                        style={styles.webContainer}
                    />
                    
                    <View style={styles.botBar}>
                        <TouchableOpacity onPress={()=>{this.overlayView && this.overlayView.close()}} style={styles.botLeft}>
                            <Text style={[styles.botLeftText, {fontSize: 15}]}>取消</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={()=>{this.submit001(shuju);}} style={styles.botRight}>
                            <Text style={styles.botRightText}>同意签署</Text>
                        </TouchableOpacity> 
                    </View>
                </View>
            </Overlay.PullView>
        );
        Overlay.show(overlayView);
    }

    submit001 = (shuju) => {
        let url = ServicesApi.create_pdf;
        let data = {
            url: shuju,
            style: '001',
            id: '',
            member_id: global.user.userData.id,
            token: global.user.userData.token,
        }
        AlertManager.showPopView(<View style={[GlobalStyles.loadingview, GlobalStyles.flexColumnCenter]}><Image source={require('../../assets/images/icons/loading.gif')} style={GlobalStyles.loading} /><Text style={GlobalStyles.loadingtext}>文件生成中，请稍候...</Text></View>, { modal:true })
        Services.post(url, data, true)
        .then( result => {
            console.log(result);
            AlertManager.hide();
            if (result && result.code == StatusCode.SUCCESS_CODE) {
                const params = {
                    title: '温馨提示',
                    detail: '尊敬的会员，您已成功签署风险测评问卷，请点击“继续”，进行签署《符合合格投资者标准的承诺书》。',
                    actions: [
                        { title: '暂不', titleStyle: {  }, actionStyle: {  }, onPress: () => { 
                            this.overlayView && this.overlayView.close()
                            this.getUserInfo(global.user.userData.id, global.user.userData.token);
                        } },
                        { title: '继续', onPress: () => {
                            this.overlayView && this.overlayView.close() 
                            this.onPushNavigator('RenzhengchengnuoLogin');
                        } }
                    ]
                }
                AlertManager.show(params)
            }else{
                toastLong(result.msg);
            }
        })
        .catch( error => {
            // toastShort('服务器请求失败，请稍后重试！');
        })
    }

    _onPressAlert3 = () => {
        const params = {
            title: '温馨提示',
            detail: '尊敬的会员，根据基金业协会管理规定，查阅基金产品信息请先完成特定对象认定程序，系统检测到您已成功签署风险测评问卷，请点击“继续”，进行签署《符合合格投资者标准的承诺书》',
            actions: [
                { title: '暂不', titleStyle: {  }, actionStyle: {  }, onPress: () => { 
                    
                } },
                { title: '继续', onPress: () => { 
                    this.onPushNavigator('RenzhengchengnuoLogin');
                } }
            ]
        }
        AlertManager.show(params)
    }

    _onPressAlert4 = () => {
        const params = {
            title: '温馨提示',
            detail: '尊敬的会员，根据基金业协会管理规定，查阅基金产品信息请先完成特定对象认定程序，系统检测到您已成功签署《符合合格投资者标准的承诺书》，请点击“继续”，进行签署《投资者风险匹配告知书及投资者确认函》。',
            actions: [
                { title: '暂不', titleStyle: {  }, actionStyle: {  }, onPress: () => { 
                    
                } },
                { title: '继续', onPress: () => { 
                    let url = ServicesApi.get_url_003;

                    let data = {
                        member_id: global.user.userData.id,
                        token: global.user.userData.token,
                    }
        
                    Services.post(url, data, true)
                        .then( result => {
                            console.log(result);
                            this.pingguAgree003(result.data.url, result.data.show_url);
                        })
                        .catch( error => {
                            // consoleLog('链接服务器出错，请稍后重试', error);
                        })
                } }
            ]
        }
        AlertManager.show(params)
    }

    pingguAgree003 = (shuju, show_link) => {
        let overlayView = (
            <Overlay.PullView side='bottom' modal={false} ref={v => this.overlayView = v}>
                <View style={{backgroundColor: '#fff', width: GlobalStyles.width, height: GlobalStyles.height}}>
                    <WebView
                        startInLoadingState={true}
                        source={{uri: show_link}}
                        style={styles.webContainer}
                    />
                    
                    <View style={styles.botBar}>
                        <TouchableOpacity onPress={()=>{this.overlayView && this.overlayView.close()}} style={styles.botLeft}>
                            <Text style={[styles.botLeftText, {fontSize: 15}]}>取消</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={()=>{this.submit003(shuju);}} style={styles.botRight}>
                            <Text style={styles.botRightText}>同意签署</Text>
                        </TouchableOpacity> 
                    </View>
                </View>
            </Overlay.PullView>
        );
        Overlay.show(overlayView);
    }

    submit003 = (shuju) => {
        let url = ServicesApi.create_pdf;
        let data = {
            url: shuju,
            style: '003',
            id: '',
            member_id: global.user.userData.id,
            token: global.user.userData.token,
        }
        AlertManager.showPopView(<View style={[GlobalStyles.loadingview, GlobalStyles.flexColumnCenter]}><Image source={require('../../assets/images/icons/loading.gif')} style={GlobalStyles.loading} /><Text style={GlobalStyles.loadingtext}>文件生成中，请稍候...</Text></View>, { modal:true })
        Services.post(url, data, true)
        .then( result => {
            console.log(result);
            AlertManager.hide();
            if (result && result.code == StatusCode.SUCCESS_CODE) {
                if(global.user.userData.is_investor == 0 || global.user.userData.is_investor == -2){
                    const params = {
                        title: '温馨提示',
                        detail: '尊敬的会员，您已成功签署本承诺书，并恭喜完成特定对象认定，点击“继续”，进入专业投资者认定（阅读风险揭示书），点击“返回”，返回基金频道查看基金产品信息。',
                        actions: [
                            { title: '返回', titleStyle: {  }, actionStyle: {  }, onPress: () => { 
                                this.overlayView && this.overlayView.close()
                                this.getUserInfo(global.user.userData.id, global.user.userData.token);
                            } },
                            { title: '继续', onPress: () => { 
                                this.overlayView && this.overlayView.close()
                                this.onPushNavigator('RenzhengTypeLogin');
                            } }
                        ]
                    }
                    AlertManager.show(params)
                }else {
                    this.overlayView && this.overlayView.close()
                }
            }else{
                toastLong(result.msg);
            }
        })
        .catch( error => {
            // toastShort('服务器请求失败，请稍后重试！');
        })
    }

    render(){
        const { ready, error, refreshing, fundListData } = this.state;
        let navigationBar = {
            backgroundColor: '#fff',
            borderBottomColor: '#f2f2f2',
            borderBottomWidth: 1
        }
        return (
            <View style={styles.container}>
                <NavigationBar
                    title = {'基金'}
                    style = {navigationBar}
                    titleStyle = {{color: '#333333'}}
                    leftButton = {UtilsView.getLeftXiaoxiBlackButton(() => this.onPushNavigator('Xiaoxi'))}
                    rightButton = {UtilsView.getRightKefuBlackButton(() => this.onPushNavigator('Kefu'))}
                />
                <View style={styles.topBar}>
                    {this.state.loginState ? 
                        <TouchableOpacity onPress={() => {this.paixu()}} style={styles.topLeft}>
                            <Image source={require('../../assets/images/icons/icon_paixu.png')} style={styles.topLeftIco} />
                            <Text style={styles.topLeftText}>排序</Text>
                        </TouchableOpacity>
                    :
                        <View style={styles.topLeft}>
                            <Image source={require('../../assets/images/icons/icon_paixu.png')} style={styles.topLeftIco} />
                            <Text style={styles.topLeftText}>排序</Text>
                        </View>
                    }
                    <View style={styles.shuxian}></View>
                    {this.state.loginState ?
                        <TouchableOpacity onPress={() => {this.shaixuan()}} style={styles.topLeft}>
                            <Image source={require('../../assets/images/icons/icon_shaixuan.png')} style={styles.topLeftIco} />
                            <Text style={styles.topLeftText}>筛选</Text>
                        </TouchableOpacity>
                    : 
                        <View style={styles.topLeft}>
                            <Image source={require('../../assets/images/icons/icon_shaixuan.png')} style={styles.topLeftIco} />
                            <Text style={styles.topLeftText}>筛选</Text>
                        </View>
                    }
                </View>
                <View style={styles.filterCon}>
                    {this.state.paixuShow ?
                        <View style={styles.paixuList}>
                            {this.state.order_type == 1 ? 
                                <TouchableOpacity onPress={() => {this.setPaixu(1)}} style={[styles.paixuItem, styles.paixuItemActive, GlobalStyles.flexRowBetween]}>
                                    <Text style={[styles.paixuText, styles.paixuTextActive]}>收益基准最高</Text>
                                    <Image source={require('../../assets/images/icons/icon_gouxuanle.png')} style={styles.gouxuanIco} />
                                </TouchableOpacity>
                            : 
                                <TouchableOpacity onPress={() => {this.setPaixu(1)}} style={[styles.paixuItem, GlobalStyles.flexRowBetween]}>
                                    <Text style={styles.paixuText}>收益基准最高</Text>
                                </TouchableOpacity>
                            }
                            {this.state.order_type == 2 ? 
                                <TouchableOpacity onPress={() => {this.setPaixu(2)}} style={[styles.paixuItem, styles.paixuItemActive, GlobalStyles.flexRowBetween]}>
                                    <Text style={[styles.paixuText, styles.paixuTextActive]}>最新上线</Text>
                                    <Image source={require('../../assets/images/icons/icon_gouxuanle.png')} style={styles.gouxuanIco} />
                                </TouchableOpacity>
                            : 
                                <TouchableOpacity onPress={() => {this.setPaixu(2)}} style={[styles.paixuItem, GlobalStyles.flexRowBetween]}>
                                    <Text style={styles.paixuText}>最新上线</Text>
                                </TouchableOpacity>
                            }
                            {this.state.order_type == 3 ? 
                                <TouchableOpacity onPress={() => {this.setPaixu(3)}} style={[styles.paixuItem, styles.paixuItemActive, GlobalStyles.flexRowBetween]}>
                                    <Text style={[styles.paixuText, styles.paixuTextActive]}>打款时间最短</Text>
                                    <Image source={require('../../assets/images/icons/icon_gouxuanle.png')} style={styles.gouxuanIco} />
                                </TouchableOpacity>
                            : 
                                <TouchableOpacity onPress={() => {this.setPaixu(3)}} style={[styles.paixuItem, GlobalStyles.flexRowBetween]}>
                                    <Text style={styles.paixuText}>打款时间最短</Text>
                                </TouchableOpacity>
                            }
                            {this.state.order_type == 4 ? 
                                <TouchableOpacity onPress={() => {this.setPaixu(4)}} style={[styles.paixuItem, styles.paixuItemActive, GlobalStyles.flexRowBetween]}>
                                    <Text style={[styles.paixuText, styles.paixuTextActive]}>认购人数最多</Text>
                                    <Image source={require('../../assets/images/icons/icon_gouxuanle.png')} style={styles.gouxuanIco} />
                                </TouchableOpacity>
                            : 
                                <TouchableOpacity onPress={() => {this.setPaixu(4)}} style={[styles.paixuItem, GlobalStyles.flexRowBetween]}>
                                    <Text style={styles.paixuText}>认购人数最多</Text>
                                </TouchableOpacity>
                            }
                            {this.state.order_type == 5 ? 
                                <TouchableOpacity onPress={() => {this.setPaixu(5)}} style={[styles.paixuItem, styles.paixuItemActive, GlobalStyles.flexRowBetween]}>
                                    <Text style={[styles.paixuText, styles.paixuTextActive]}>剩余额度最多</Text>
                                    <Image source={require('../../assets/images/icons/icon_gouxuanle.png')} style={styles.gouxuanIco} />
                                </TouchableOpacity>
                            : 
                                <TouchableOpacity onPress={() => {this.setPaixu(5)}} style={[styles.paixuItem, GlobalStyles.flexRowBetween]}>
                                    <Text style={styles.paixuText}>剩余额度最多</Text>
                                </TouchableOpacity>
                            }
                            {this.state.order_type == 6 ? 
                                <TouchableOpacity onPress={() => {this.setPaixu(6)}} style={[styles.paixuItem, styles.paixuItemActive, GlobalStyles.flexRowBetween]}>
                                    <Text style={[styles.paixuText, styles.paixuTextActive]}>产品期限最短</Text>
                                    <Image source={require('../../assets/images/icons/icon_gouxuanle.png')} style={styles.gouxuanIco} />
                                </TouchableOpacity>
                            : 
                                <TouchableOpacity onPress={() => {this.setPaixu(6)}} style={[styles.paixuItem, GlobalStyles.flexRowBetween]}>
                                    <Text style={styles.paixuText}>产品期限最短</Text>
                                </TouchableOpacity>
                            }
                        </View>
                    : null}

                    {this.state.shaixuanShow ?
                        <View style={styles.shaixuanList}>
                            <View style={styles.sxItem}>
                                <Text style={styles.sxTitle}>基金类型</Text>
                                <View style={[styles.sxCon, GlobalStyles.flexRowStart]}>
                                    {this.state.fund_type == 1 ? 
                                        <TouchableOpacity onPress={() => {this.setType(1)}} style={[styles.sxKuang, styles.sxKuangActive, {marginBottom: 10}]}>
                                            <Text style={[styles.sxKuangText, styles.sxKuangTextActive]}>股权型</Text>
                                        </TouchableOpacity>
                                    : 
                                        <TouchableOpacity onPress={() => {this.setType(1)}} style={[styles.sxKuang, {marginBottom: 10}]}>
                                            <Text style={styles.sxKuangText}>股权型</Text>
                                        </TouchableOpacity>
                                    }
                                    {this.state.fund_type == 2 ? 
                                        <TouchableOpacity onPress={() => {this.setType(2)}} style={[styles.sxKuang, styles.sxKuangActive, {marginBottom: 10}]}>
                                            <Text style={[styles.sxKuangText, styles.sxKuangTextActive]}>债券型</Text>
                                        </TouchableOpacity>
                                    : 
                                        <TouchableOpacity onPress={() => {this.setType(2)}} style={[styles.sxKuang, {marginBottom: 10}]}>
                                            <Text style={styles.sxKuangText}>债券型</Text>
                                        </TouchableOpacity>
                                    }
                                    {this.state.fund_type == 3 ? 
                                        <TouchableOpacity onPress={() => {this.setType(3)}} style={[styles.sxKuang, styles.sxKuangActive, {marginBottom: 10}]}>
                                            <Text style={[styles.sxKuangText, styles.sxKuangTextActive]}>股票型</Text>
                                        </TouchableOpacity>
                                    : 
                                        <TouchableOpacity onPress={() => {this.setType(3)}} style={[styles.sxKuang, {marginBottom: 10}]}>
                                            <Text style={styles.sxKuangText}>股票型</Text>
                                        </TouchableOpacity>
                                    }
                                    {this.state.fund_type == 4 ? 
                                        <TouchableOpacity onPress={() => {this.setType(4)}} style={[styles.sxKuang, styles.sxKuangActive, {marginBottom: 10}]}>
                                            <Text style={[styles.sxKuangText, styles.sxKuangTextActive]}>货币型</Text>
                                        </TouchableOpacity>
                                    : 
                                        <TouchableOpacity onPress={() => {this.setType(4)}} style={[styles.sxKuang, {marginBottom: 10}]}>
                                            <Text style={styles.sxKuangText}>货币型</Text>
                                        </TouchableOpacity>
                                    }
                                </View>
                                <View style={[styles.sxCon, GlobalStyles.flexRowStart]}>
                                    {this.state.fund_type == 5 ? 
                                        <TouchableOpacity onPress={() => {this.setType(5)}} style={[styles.sxKuang, styles.sxKuangActive]}>
                                            <Text style={[styles.sxKuangText, styles.sxKuangTextActive]}>理财型</Text>
                                        </TouchableOpacity>
                                    : 
                                        <TouchableOpacity onPress={() => {this.setType(5)}} style={[styles.sxKuang]}>
                                            <Text style={styles.sxKuangText}>理财型</Text>
                                        </TouchableOpacity>
                                    }
                                    {this.state.fund_type == 6 ? 
                                        <TouchableOpacity onPress={() => {this.setType(6)}} style={[styles.sxKuang, styles.sxKuangActive]}>
                                            <Text style={[styles.sxKuangText, styles.sxKuangTextActive]}>定开理财型</Text>
                                        </TouchableOpacity>
                                    : 
                                        <TouchableOpacity onPress={() => {this.setType(6)}} style={[styles.sxKuang]}>
                                            <Text style={styles.sxKuangText}>定开理财型</Text>
                                        </TouchableOpacity>
                                    }
                                    {this.state.fund_type == 7 ? 
                                        <TouchableOpacity onPress={() => {this.setType(7)}} style={[styles.sxKuang, styles.sxKuangActive]}>
                                            <Text style={[styles.sxKuangText, styles.sxKuangTextActive]}>混合型</Text>
                                        </TouchableOpacity>
                                    : 
                                        <TouchableOpacity onPress={() => {this.setType(7)}} style={[styles.sxKuang]}>
                                            <Text style={styles.sxKuangText}>混合型</Text>
                                        </TouchableOpacity>
                                    }
                                    {this.state.fund_type == 8 ? 
                                        <TouchableOpacity onPress={() => {this.setType(8)}} style={[styles.sxKuang, styles.sxKuangActive]}>
                                            <Text style={[styles.sxKuangText, styles.sxKuangTextActive]}>指数型</Text>
                                        </TouchableOpacity>
                                    : 
                                        <TouchableOpacity onPress={() => {this.setType(8)}} style={[styles.sxKuang]}>
                                            <Text style={styles.sxKuangText}>指数型</Text>
                                        </TouchableOpacity>
                                    }
                                </View>
                            </View>
                            <View style={styles.sxItem}>
                                <Text style={styles.sxTitle}>风险级别</Text>
                                <View style={[styles.sxCon, GlobalStyles.flexRowStart]}>
                                    {this.state.risk_level == 5 ? 
                                        <TouchableOpacity onPress={() => {this.setDengji(5)}} style={[styles.sxKuang, styles.sxKuangActive]}>
                                            <Text style={[styles.sxKuangText, styles.sxKuangTextActive]}>高</Text>
                                        </TouchableOpacity>
                                    : 
                                        <TouchableOpacity onPress={() => {this.setDengji(5)}} style={[styles.sxKuang]}>
                                            <Text style={styles.sxKuangText}>高</Text>
                                        </TouchableOpacity>
                                    }
                                    {this.state.risk_level == 4 ? 
                                        <TouchableOpacity onPress={() => {this.setDengji(4)}} style={[styles.sxKuang, styles.sxKuangActive]}>
                                            <Text style={[styles.sxKuangText, styles.sxKuangTextActive]}>中高</Text>
                                        </TouchableOpacity>
                                    : 
                                        <TouchableOpacity onPress={() => {this.setDengji(4)}} style={[styles.sxKuang]}>
                                            <Text style={styles.sxKuangText}>中高</Text>
                                        </TouchableOpacity>
                                    }
                                    {this.state.risk_level == 3 ? 
                                        <TouchableOpacity onPress={() => {this.setDengji(3)}} style={[styles.sxKuang, styles.sxKuangActive]}>
                                            <Text style={[styles.sxKuangText, styles.sxKuangTextActive]}>中</Text>
                                        </TouchableOpacity>
                                    : 
                                        <TouchableOpacity onPress={() => {this.setDengji(3)}} style={[styles.sxKuang]}>
                                            <Text style={styles.sxKuangText}>中</Text>
                                        </TouchableOpacity>
                                    }
                                    {this.state.risk_level == 2 ? 
                                        <TouchableOpacity onPress={() => {this.setDengji(2)}} style={[styles.sxKuang, styles.sxKuangActive]}>
                                            <Text style={[styles.sxKuangText, styles.sxKuangTextActive]}>中低</Text>
                                        </TouchableOpacity>
                                    : 
                                        <TouchableOpacity onPress={() => {this.setDengji(2)}} style={[styles.sxKuang]}>
                                            <Text style={styles.sxKuangText}>中低</Text>
                                        </TouchableOpacity>
                                    }
                                    {this.state.risk_level == 1 ? 
                                        <TouchableOpacity onPress={() => {this.setDengji(1)}} style={[styles.sxKuang, styles.sxKuangActive]}>
                                            <Text style={[styles.sxKuangText, styles.sxKuangTextActive]}>低</Text>
                                        </TouchableOpacity>
                                    : 
                                        <TouchableOpacity onPress={() => {this.setDengji(1)}} style={[styles.sxKuang]}>
                                            <Text style={styles.sxKuangText}>低</Text>
                                        </TouchableOpacity>
                                    }
                                </View>
                            </View>
                            <View style={styles.sxItem}>
                                <Text style={styles.sxTitle}>收益基准</Text>
                                <View style={[styles.sxCon, GlobalStyles.flexRowStart]}>
                                    <TextInput
                                        placeholder={''}
                                        defaultValue={this.state.rate_start}
                                        keyboardType="numeric"
                                        onChangeText={(text) => {
                                            this.setState({
                                                rate_start: text
                                            })
                                        }}
                                        style={[styles.cellInput, GlobalStyles.isIOS ? null : styles.inputAndroid]} 
                                        underlineColorAndroid={'transparent'}
                                    >
                                    </TextInput>
                                    <Text style={styles.jizhunxian}>-</Text>
                                    <TextInput
                                        placeholder={''}
                                        defaultValue={this.state.rate_end}
                                        keyboardType="numeric"
                                        onChangeText={(text) => {
                                            this.setState({
                                                rate_end: text
                                            })
                                        }}
                                        style={[styles.cellInput, GlobalStyles.isIOS ? null : styles.inputAndroid]} 
                                        underlineColorAndroid={'transparent'}
                                    >
                                    </TextInput>
                                    <Text style={styles.baifenhao}>%</Text>
                                </View>
                            </View>
                            <View style={[styles.sxItembot, GlobalStyles.flexRowBetween]}>
                                <TouchableOpacity onPress={() => {this.reSet()}} style={[styles.sxbtn, GlobalStyles.flexRowCenter]}>
                                    <Text style={styles.sxbtna}>重置</Text>
                                </TouchableOpacity>
                                <TouchableOpacity onPress={() => {this.submit()}} style={[styles.sxbtnn, GlobalStyles.flexRowCenter]}>
                                    <Text style={styles.sxbtnna}>完成</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    : null}
                </View>

                {this.state.yinyingShow ? <TouchableOpacity onPress={() => {this.yinying()}} style={styles.yinying}></TouchableOpacity> : null}
                

                
                {this.funList(ready, error, refreshing, fundListData)}

                
            </View>
        );
    }

    funList = (ready, error, refreshing, fundListData) => {
        let data = [["C", "Java", "JavaScript"], ["Python", "Ruby"], ["Swift", "Objective-C"]];
        if(!this.state.loginState){
            return (
                <View style={styles.fundLogin}>
                    <Image source={require('../../assets/images/images/image_fund_login.png')} style={styles.fundLoginImg} />
                    <TouchableOpacity onPress={() => {this.onPushNavigator('Login')}} style={[GlobalStyles.submit, styles.submitbot]}><Text style={GlobalStyles.btna}>登录后查看</Text></TouchableOpacity>
                </View>
            ) 
        }else if(global.user.loginState){
            if(global.user.userData.is_risk == 0){
                if(global.user.userData.is_risk_answer == 0){
                    return (
                        <View style={styles.fundLogin}>
                            <Image source={require('../../assets/images/images/image_fund_login.png')} style={styles.fundLoginImg} />
                            <TouchableOpacity onPress={() => {this._onPressAlert1()}} style={[GlobalStyles.submit, styles.submitbot]}><Text style={GlobalStyles.btna}>特定对象认定后查看</Text></TouchableOpacity>
                        </View>
                    )  
                }else{
                    if(global.user.userData.new_status == 0){
                        return (
                            <View style={styles.fundLogin}>
                                <Image source={require('../../assets/images/images/image_fund_login.png')} style={styles.fundLoginImg} />
                                <TouchableOpacity onPress={() => {this._onPressAlert2()}} style={[GlobalStyles.submit, styles.submitbot]}><Text style={GlobalStyles.btna}>特定对象认定后查看</Text></TouchableOpacity>
                            </View>
                        ) 
                    }else if(global.user.userData.new_status == 1){
                        return (
                            <View style={styles.fundLogin}>
                                <Image source={require('../../assets/images/images/image_fund_login.png')} style={styles.fundLoginImg} />
                                <TouchableOpacity onPress={() => {this._onPressAlert3()}} style={[GlobalStyles.submit, styles.submitbot]}><Text style={GlobalStyles.btna}>特定对象认定后查看</Text></TouchableOpacity>
                            </View>
                        )
                    }else if(global.user.userData.new_status == 2){
                        return (
                            <View style={styles.fundLogin}>
                                <Image source={require('../../assets/images/images/image_fund_login.png')} style={styles.fundLoginImg} />
                                <TouchableOpacity onPress={() => {this._onPressAlert4()}} style={[GlobalStyles.submit, styles.submitbot]}><Text style={GlobalStyles.btna}>特定对象认定后查看</Text></TouchableOpacity>
                            </View>
                        )
                    }
                }
            }else if(global.user.userData.is_risk == 1){
                if(ready){
                    return (
                        <View style={[GlobalStyles.whiteModule, {marginTop: 0, zIndex: 1}]}>
                            <View style={[GlobalStyles.fundModule, {paddingLeft: 0, paddingRight: 0, marginBottom: 110}]}>
                                <FlatList
                                    style = {styles.shopListView}
                                    keyExtractor = { item => item.id}
                                    data = {fundListData}
                                    extraData = {this.state}
                                    renderItem = {(item) => this.renderCompanyItem(item)}
                                    onEndReachedThreshold = {0.1}
                                    onEndReached = {(info) => this.dropLoadMore(info)}
                                    onRefresh = {this.freshNetData}
                                    refreshing = {refreshing}
                                    ItemSeparatorComponent={this.renderSeparator}
                                    ListHeaderComponent = {this.renderHeaderView}
                                    ListFooterComponent = {this.renderFooterView}
                                    ListEmptyComponent = {this.renderEmptyView}
                                />
                            </View>
                        </View>
                    )
                }else{
                    return (
                        <ActivityIndicatorItem />
                    )
                }
            }
        }
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    webContainer: {
        width: GlobalStyles.width,
        height: GlobalStyles.height,
        flex: 1,
        backgroundColor: '#fff',
        marginTop: Platform.OS === 'ios' ? -15 : 0,
    },
    topBar: {
        height: 55,
        backgroundColor: '#fff',
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'relative',
        zIndex: 999,
        borderBottomWidth: 10,
        borderBottomColor: GlobalStyles.bgColor
    },
    topLeft: {
        flex: 1,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    topLeftIco: {
        height: 24,
        width: 24,
        marginRight: 5
    },
    topLeftText: {
        fontSize: 15,
        color: '#666',
        height: 20,
        lineHeight: 20,
    },
    shuxian: {
        position: 'absolute',
        height: 24,
        width: 1.5,
        backgroundColor: '#ececec',
        top: 10
    },
    fundLogin: {
        width: GlobalStyles.width,
        flex: 1,
        paddingBottom: 30,
        backgroundColor: '#fff'
    },
    fundLoginImg: {
        width: GlobalStyles.width,
        height: GlobalStyles.width*860/660,
    },
    submitbot: {
        position: 'absolute',
        bottom: 0,
        width: GlobalStyles.width - 30,
        borderRadius: 0,
        height: 42        
    },
    filterCon: {
        position: 'absolute',
        top: Theme.statusBarHeight+44+1+55,
        left: 0,
        // height: Theme.screenHeight-(Theme.statusBarHeight+44+1+55),
        width: Theme.screenWidth,
        backgroundColor: 'transparent',
        zIndex: 999
    },
    paixuList: {
        width: GlobalStyles.width,
        backgroundColor: '#fff',
        paddingLeft: 15,
        paddingRight: 15,
        // position: 'absolute',
        // top: 40,
        // left: 0,
        // marginTop: 10,
        // borderTopWidth: 1,
        // borderTopColor: '#f2f2f2',
    },
    paixuItem: {
        height: 45,
        borderTopWidth: 1,
        borderTopColor: '#f2f2f2',
    },
    paixuText: {
        color: '#666'
    },    
    paixuItemActive: {
        
    },
    paixuTextActive: {
        color: GlobalStyles.themeColor
    },
    gouxuanIco: {
        width: 20,
        height: 20,
    },
    yinying: {
        backgroundColor: 'rgba(0,0,0,.3)',
        position: 'absolute',
        width: GlobalStyles.width,
        height: GlobalStyles.height - 64 - 55 - 10,
        bottom: 0,
        top: 64+55+10,
        zIndex: 99,
    },
    shaixuanList: {
        width: GlobalStyles.width,
        backgroundColor: '#fff',
        paddingLeft: 15,
        paddingRight: 15,
        paddingTop: 15,
        // position: 'absolute',
        // top: 40,
        // left: 0,
        // marginTop: 10,

    },
    sxItem: {
        borderBottomColor: '#f2f2f2',
        borderBottomWidth: 1,
        paddingBottom: 12,
        marginBottom: 12,
    },
    sxItembot: {
        marginBottom: 12,
    },
    sxTitle: {
        fontSize: 15,
        color: '#666',
        marginBottom: 10,
        // marginTop: 5,
    },
    sxCon: {
        // backgroundColor: '#000'
    },
    sxKuang: {
        borderRadius: 5,
        paddingTop: 5,
        paddingBottom: 5,
        paddingLeft: 7,
        paddingRight: 7,
        borderWidth: 1,
        borderColor: '#f2f2f2',
        marginRight: 10
    },
    sxKuangText: {
        color: '#333',
        fontSize: 15
    },
    sxKuangActive: {
        borderColor: GlobalStyles.themeColor,
        backgroundColor: GlobalStyles.themeColor,
    },
    sxKuangTextActive: {
        color: '#fff',
    },
    cellInput: {
        borderRadius: 5,
        padding: 5,
        borderWidth: 1,
        borderColor: '#f2f2f2',
        color: '#666',
        width: 50,
        textAlign: 'center'
    },
    jizhunxian: {
        marginLeft: 10,
        marginRight: 10,
    },
    baifenhao: {
        marginLeft: 10,
        color: GlobalStyles.themeColor,
        fontWeight: 'bold'
    },
    sxbtn: {
        width: (GlobalStyles.width - 30)/2-10,
        height: 40,
        borderRadius: 4,
        borderWidth: 1,
        borderColor: '#f2f2f2',
    },
    sxbtna: {
        color: GlobalStyles.themeColor,
        fontSize: 16
    },
    sxbtnn: {
        width: (GlobalStyles.width - 30)/2-10,
        height: 40,
        borderRadius: 4,
        borderWidth: 1,
        borderColor: '#f2f2f2',
        backgroundColor: GlobalStyles.themeColor,
    },
    sxbtnna: {
        color: '#fff',
        fontSize: 16
    },
    botBar: {
        height: 54,
        backgroundColor: '#fff',
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderTopColor: '#ececec',
        borderTopWidth: 1,

    },
    botLeft: {
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
    },
    botLeftIco: {
        height: 24,

    },
    botLeftText: {
        fontSize: 13,
        color: '#666',
        height: 20,
        lineHeight: 20,
    },
    botRight: {
        flex: 2.5,
        backgroundColor: GlobalStyles.themeColor,
        height: 54,
        justifyContent: 'center',
        alignItems: 'center',

    },
    botRightText: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold'
    },
});
